<template>
	<div class="container">
		<Card class="no-shadow" style="width:90%; margin:0 auto;">
	        <a href="javascript:;" :class="{'is-active':category.id == q}" class="category" v-for="category in categoryList" @click="filterNews(category.id)">{{category.name}}</a>
	    </Card>
	    <section class="news-containter">
			<div class="news-item" v-for="item in table.list" v-if="table.total != 0">
				<div class="title">{{item.name}}</div>
				<div class="sundry">
					<span class="type">{{item.category.data.name}}</span>
					<span class="time">{{item.inTimes}}</span>
					<span class="browse">
						<Icon type="eye" size="14"></Icon>
						<span>{{item.browse_number}}</span>
					</span>
				</div>
				<div class="content" v-html="item.content"></div>
				<!-- <a href="javascript:;" class="read">阅读全文</a> -->
				<router-link :to="{path:'/news-content',query:{q:item.id}}" class="read">阅读全文</router-link>
			</div>
			<div class="no-more" v-if="table.total == 0">暂无相关新闻</div>
	    </section>
	    <Page class="pagination"
	    	:current="table.page"
	    	:total="table.total"
	    	:page-size="table.size"
	    	@on-change="handlePage"
	    	size="small"
	    	v-show="table.total != 0">
	    </Page>
	</div>
</template>
<script type="text/javascript">
	export default{
		data(){
			return{
				categoryList:[],
				table:{
					list:[],
					page:Number(this.$route.query.page) || 1,
					size:15,
					total:0
				},
				q:this.$route.query.category || ''
			}
		},
		mounted(){
			this.initCategory();
			this.initNews();
		},
		watch:{
			$route(){
				this.initNews();
			}
		},
		methods:{
			initCategory(){
				this.$http.get('/nc/list').then(response => {
					this.categoryList = response.data.data;
					this.categoryList.unshift({
						name:'全部',
						id:''
					})
				}).catch(err => {

				})
			},
			filterNews(id){
				this.q = id;
				this.$router.push({
					path:this.$route.path,
					query:{
						page:this.table.page,
						category:this.q
					}
				})
			},
			handlePage(val){
				this.table.page = val;
				this.$router.push({
					path:this.$route.path,
					query:{
						page:this.table.page,
						category:this.q
					}
				})
			},
			initNews(){
				this.$http.get('/news/list',{
						params: {
							page: this.table.page,
							category:  this.q,
							include:'category'
						}
					}).then(ret => {
					this.table.list = ret.data.data;
					this.table.page = ret.data.meta.pagination.current_page;
					this.table.total = ret.data.meta.pagination.total;
				}).catch(err => {

				})
			}
		}
	}
</script>
<style scoped>
	.container{ max-width:1200px; margin:16px auto;}
	.category{ display:inline-block; padding: 5px 8px; margin-right:20px;transition:all 0.2s ease-out;}
	.category:hover,.category.is-active{ background:#14a88c; color:#fff; border-radius:3px;}
	.news-containter{ width:90%; margin:50px auto 0; }
	.news-item{ height:170px; background:#f7f7f7; padding:20px 34px; position: relative; margin-bottom:20px;}
	.sundry{ margin-top:13px; margin-bottom:20px;}
	.title{ font-size:16px;}
	.type{ font-size:12px; padding:3px 14px; background: #15ccac; color:#fff; border-radius:3px; margin-right:20px; display:inline-block;}
	.time{ margin-right:20px; color:#999; }
	.browse{ color:#999;}
	.content{ color:#666; line-height:22px;
		height:44px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
	}
	.content img{ display:none !important; }
	.read{ position: absolute; right:34px; bottom:20px; color:#14a88c;}
	.read:hover{ color:#15ccac;}
	.no-more{ text-align:center; color:#ccc; }
</style>
